import React, {Component} from 'react';
import {
	StyleSheet,
	View,
	Text, 
	Modal, 
	ActivityIndicator,
	StatusBar,
} from 'react-native';

export default class Loading extends Component {
	render() {
		let barHeight = StatusBar.currentHeight;
		return (
			<Modal
                animationType='fade'           // 淡入淡出
                transparent={true}              // 透明
                visible={this.props.visible}    // 根据isModal决定是否显示
                onRequestClose={this.props.onRequestClose}  // android必须实现
            >
                <View style={styles.container}>
                    <View style={[styles.child, {marginTop: -65-(barHeight/2)}]}>
                        <ActivityIndicator color='#fff' size='large'></ActivityIndicator>
                        <Text style={styles.childText}>加载中…</Text>
                    </View>
                </View>
            </Modal>
		)
	}
}

const styles = StyleSheet.create({
    container: {flex: 1},
    child: {position: 'absolute', zIndex: 1000, left: '50%', top: '50%', marginLeft: -39, width: 78, height: 78, justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: 'rgba(0,0,0,0.8)'},
	childText: {fontSize: 12, color: '#fff'},
});